<template>
  <mx-map :options="options">
    <div class="mx-panel">
      <yt-switch label="网格" :value="getValue('grid')" @input="(val) => setValue(val, 'grid')"></yt-switch>
      <yt-switch label="企业" :value="getValue('enterprise')" @input="(val) => setValue(val, 'enterprise')"></yt-switch>
      <yt-switch label="重大危险源" :value="getValue('hazards')" @input="(val) => setValue(val, 'hazards')"></yt-switch>
      <yt-switch label="隐患" :value="getValue('danger')" @input="(val) => setValue(val, 'danger')"></yt-switch>
      <yt-switch label="风险" :value="getValue('risk')" @input="(val) => setValue(val, 'risk')"></yt-switch>
      <yt-switch label="票证" :value="getValue('ticket')" @input="(val) => setValue(val, 'ticket')"></yt-switch>
      <yt-switch label="视频" :value="getValue('video')" @input="(val) => setValue(val, 'video')"></yt-switch>
      <yt-switch label="设备" :value="getValue('sensor')" @input="(val) => setValue(val, 'sensor')"></yt-switch>
    </div>
  </mx-map>
</template>

<script type="text/ecmascript-6">
import _ from "lodash";
import mxMap from "./map/index.vue";
import grid from "./layerGrid/index.js"
import enterprise from "./layerEnterprise/index.js";
import danger from "./layerDanger/index.js";
import hazards from "./layerHazards/index.js";
import ticket from "./layerTicket/index.js";
import risk from "./layerRisk/index.js";
import video from "./layerVideo/index.js";
import sensor from "./layerSensor/index.js";
import { commonApi } from '@/common/api/commonApi.js'

export default {
  components: { mxMap },
  data() {
    return {
      options: _.merge(
        { 
          active: ["grid"],
          sources: { dictionaries: ["danger_hidden"] }
        },
        grid,
        enterprise,
        hazards,
        danger,
        risk,
        ticket,
        video,
        sensor
      )
    };
  },
  methods: {
    getValue(name) {
      return this.options.active.indexOf(name) > -1;
    },
    setValue(val, name) {
      let index = this.options.active.indexOf(name);
      if (val && index === -1) {
        this.options.active.push(name);
      } else if (!val && index > -1) {
        this.options.active.splice(index, 1);
      }
    }
  }
};
</script>

<style scoped type="text/stylus" lang="stylus" rel="stylesheet/stylus">
.mx-panel {
  position: absolute;
  right: 10px;
  top: 100px;
  width: 300px;
  height: 300px;
  z-index: 10;
  background-color: #ffffff;
}
</style>
